<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			html,
			body,
			.img-wrap {
				width: 100%;
				height: 100%;
			}
			
			.img-wrap img {
				display: block;
				margin: 0 auto;
				max-width: 100%;
				max-height: 80%;
			}
		</style>
	</head>

	<body>
		<div class="img-wrap">
			<img src='http://desk.fd.zol-img.com.cn/t_s1920x1080/g5/M00/01/0E/ChMkJ1bKwf2IatSoAALNor2rRq4AALGhAG_TloAAs26368.jpg' />
		</div>
		<script type="text/javascript">
			var img = document.getElementsByTagName('img')[0];
			img.addEventListener("touchstart", function(e) {
				console.log('touchstart')
			}, false);
			img.addEventListener("touchmove", function(e) {
				console.log('touchmove')

			}, false);
			img.addEventListener("touchend", function(e) {
				console.log('touchend')

			}, false);
		</script>
	</body>

</html>